<template>
  <div class="organizationStructure">
    <el-tree
      :data="organData"
      :default-expand-all="organHead.expand_all?false:true"
      :expand-on-click-node="false"
      :show-checkbox="organHead.checkChange?true:false"
      @node-click="organHead.clickFun"
      :props="organHead.props"
      highlight-current
    >
      <!-- @check-change="organHead.checkChange" -->
    
      <div class="custom-tree-node" slot-scope="{node,data}" v-if="organHead.clickFun" >
        <div v-if="organHead.type!=='edit'">
          <div class="fl">{{ node.label }}</div>
        </div>

        <template v-if="organHead.type=='edit'">
          <div v-if="data.newNode" class="aaaaa" @click.stop="stopFun()">
            <input type="text" class="fl" v-model="tm_str" />
            <div class="switchs_1 fr" v-if="data[organHead.keyId]||data[organHead.keyId]==0">
              <i class="el-icon-success" @click="saveFun(organHead.save,data)"></i>
              <i class="el-icon-error" @click="eliminateFun(data,node)"></i>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </div>
          <div v-else>
            <div class="fl">{{ node.label }}</div>
            <!-- <div class="switchs_0 fr" v-if="data[organHead.keyId]||data[organHead.keyId]==0">
              <el-button
                type="text"
                class="edit fl"
                size="mini"
                @click="editFun(organHead.editFun,data)"
              ></el-button>
              <el-button type="text" class="delete fl" size="mini" @click="organHead.remove(data)"></el-button>
              <div class="clear"></div>
            </div> -->
            <div class="clear"></div>
          </div>
        </template>
      </div>
      <div v-else>
        <div class="fl">{{ node.label }}</div>
      </div>
    </el-tree>
  </div>
</template>
<style lang="less" scoped>
.save {
  background-image: url("../../assets/img/tree_true.png");
}
.eliminate {
  background-image: url("../../assets/img/tree_false.png");
}
.delete {
  background-image: url("../../assets/img/tree_delete.png");
}
.edit {
  background-image: url("../../assets/img/tree_edit.png");
}

.save,
.eliminate,
.delete,
.edit {
  width: 30px;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
}

.custom-tree-node,
.custom-tree-node div {
  height: 100%;
  line-height: 30px;
}


.custom-tree-node{
  // min-width:100%;
  width: 100%;
}
.custom-tree-node > div {
  // padding-right: 70px;
  position: relative;
  box-sizing: border-box;
  // width: min-content;
  display: flex;
}

.custom-tree-node > div > input.fl {
  display: block;
  height: 28px;
  width: 100px;
  border: 1px solid;
  border-radius: 5px;
}

.custom-tree-node > div > .fr {
  // width: 62px;
  // position: absolute;
  // right: 0;
  // top: 0;
  // text-align: right;
  margin-left: 10px;
}
.custom-tree-node > div > .fr i {
  font-size: 18px;
  color: #303133 !important;
}
.custom-tree-node > div > .fr i:hover {
  color: #06E5E2 !important;
}

input {
  border: none;
  padding-left: 5px;
}
</style>

<style lang="less">
.organizationStructure {
  height: 100%;
}

.organizationStructure > .el-tree,
.organizationStructure > .el-tree > .el-tree-node {
  // width: 100%;
  // height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: auto;
  font-size: .16rem;  
}
// .organizationStructure > .el-tree > .el-tree-node {
//   padding-top: 36px;
//   box-sizing: border-box;
// }
// .organizationStructure > .el-tree > .el-tree-node > .el-tree-node__content {
//   background: rgba($color: #1a707a, $alpha: 0.5);
//   color: #1ad2ff;
//   position: absolute;
//   left: 0;
//   top: 0;
//   width: 100%;
//   height: 36px;
// }
.organizationStructure > .el-tree > .el-tree-node > .el-tree-node__children {
  width: 100%;
  // height: 100%;
  display: block;
  overflow: auto;
}
.organizationStructure .el-tree-node__content {
  color: #303133;
}

// .organizationStructure .is-current .el-tree-node__content {
//   background: #f0f7ff !important;
// }
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: #f0f7ff !important;
}


.organizationStructure {
  .el-tree {
    background: none;
    .el-tree__empty-text {
      color: #333;
    }
  }
  .organizationStructure .el-menu-vertical-demo {
    padding-top: 21px;
    border: none;
  }

  .el-tree-node__expand-icon.expanded {
    // transform: none; // 三角动画
  }

  .is-leaf.el-icon-caret-right:before {
    content: none;
  }

  .el-tree-node__content {
    height: 30px;
  }

  .el-tree-node > .el-tree-node__children {
    overflow: initial;
  }

  .el-tree-node__content:hover {
    background: none;
  }

  .el-tree-node__content .el-tree-node__expand-icon {
    // padding-left: 14px;    // 三角动画
  }
}
</style>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // data: JSON.parse(JSON.stringify(organData))
      switchs: null,
      tm_str: "新建分组"
    };
  },
  created() {},
  methods: {
    stopFun(){
    return false;
    },
    editFun(fun, data) {
      // this.switchs = data.$treeNodeId;
      // this.tm_str = data.label;
      fun(data);
    },
    saveFun(fun, data, node) {
      //更改提交
      this.$set(data, "label", this.tm_str);
      if (fun(data) === true) {
        this.$set(data, "newNode", null);
      }
    },
    eliminateFun(data, node) {
      if(data.updateNode) {       // 编辑分组 取消
        data.newNode = false;
        this.tm_str = "新建分组";
      }else{                      // 新建分组 取消
        let parent = node.parent;
        let children = parent.data.children || parent.data;
        let index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
        this.tm_str = "新建分组";
      }
      
    }
  },
  props: ["organData", "organHead"]
};
</script>
